<script>
import axios from "axios";

export default {
  name: "axiosText",
  data(){
    return{
      src:"",
      imglist:[],
      courseList:[],
      boutiqueCourseList:[]
    }
  },
  methods:{
    getCourseList(type){
      return axios.post('https://wkt.myhope365.com/weChat/applet/course/list/type',{
        type,
        pageNum: 1,
        pageSize: 5,
      },{
        headers:{
          'Content-Type': 'application/x-www-form-urlencoded',
        }
      })
    }

  },
  created() {
    // axios.get("https://wkt.myhope365.com/weChat/applet/course/banner/list?number=3").then(res=>{
    //   console.log(res)
    //   this.src=res.data.data[0].imgUrlPc
    //   this.imglist=res.data.data
    // })
    console.log(this.getCourseList())
    this.getCourseList('free').then(res=>{
      this.courseList=res.data.rows
    })
    this.getCourseList('boutique').then(res=>{
      this.boutiqueCourseList=res.data.rows
    })
    //   axios.post('https://wkt.myhope365.com/weChat/applet/course/list/type',{
    //     type:'free',
    //     pageNum: 1,
    //     pageSize: 5,
    //   },{
    //     headers:{
    //       'Content-Type': 'application/x-www-form-urlencoded',
    //     }
    //   }).then(res=>{
    //     console.log(res)
    //     this.courseList=res.data.rows
    //   })
    // axios.post('https://wkt.myhope365.com/weChat/applet/course/list/type',{
    //   type:'boutique',
    //   pageNum: 1,
    //   pageSize: 5,
    // },{
    //   headers:{
    //     'Content-Type': 'application/x-www-form-urlencoded',
    //   }
    // }).then(res=>{
    //   console.log(res)
    //   this.boutiqueCourseList=res.data.rows
    // })
  }
}
</script>

<template>
<div id="app">
  <img :src="src" alt="">
  <img v-for="item in imglist" :key="item.id" :src="item.imgUrlPc" alt="">
  <div class="container">
    <div v-for="item in courseList" :key="item.courseId" class="danGe">
      <img :src="item.coverFileUrl" alt="">
      <div>{{item.courseTitle}}</div>
      <div>学习人数：{{item.learningNum}}</div>
      <div v-if="item.isFree==='1'">免费</div>
      <div v-else-if="item.isDiscount==='1'">
        <del>{{ item.coursePrice }}</del>
        {{ item.discountPrice }}
      </div>
      <div v-else>{{ item.coursePrice }}</div>
    </div>
  </div>

  <div class="container">
    <div v-for="item in boutiqueCourseList" :key="item.courseId" class="danGe">
      <img :src="item.coverFileUrl" alt="">
      <div>{{item.courseTitle}}</div>
      <div>学习人数：{{item.learningNum}}</div>
      <div v-if="item.isFree==='1'">免费</div>
      <div v-else-if="item.isDiscount==='1'">
        <del>{{ item.coursePrice }}</del>
        {{ item.discountPrice }}
      </div>
      <div v-else>{{ item.coursePrice }}</div>
    </div>
  </div>
</div>
</template>

<style scoped lang="less">
.container{
  display: flex;
  justify-content: space-between;

}
.danGe{
  width: 18%;
  img{
    width: 100%;
  }
}
</style>